// import logo from './logo.svg';
import React from 'react';
import 'antd/dist/antd.css';

import './App.css';
import Fb from './Day1/Fb'
import HelloWord from './Day1/HelloWord'
import HelloWordcopy from './Day1/HelloWord copy'
import Input from './Day1/Input'
import NumberList from './Day1/NumberList'
import Calc from './Day2/Calc';
import FelcUser from './Day2/FelcUser';
import FelcUserBtn from './Day2/FelcUserBtn';
import Form from './Day2/Form';
import FormHoc from './Day2/FormHoc';
import windowWidthHoc from './Day2/WindowWidhHoc';
import Function from './Day3/01-Hook';
import Hooks02 from './Day3/02-Hook';
import Context from './Day3/03-Hook';
import Practice from './Day3/04-Hook';
import TimerHook from './Day3/05-Hook';
import Reducer from './Day3/06-Hook';
import Callback from './Day3/07-Hook';

import HookForm from './Day4/01-HookFrom'
import GetUser from './Day4/getUser'
import Ordering from './Day4/Ordering'
import Butten from './Day5/01-butten'
import Grid from './Day5/02-grid'
import Tabs from './Day5/03-tabs'



// eslint-disable-next-line no-sparse-arrays
const menuMap = [
  {
    title: 'hello word',
    Component: HelloWord,
    groupTitle:'day1'
  },
  {
    title: 'hello word copy',
    Component: HelloWordcopy,
  },{
    title: 'Input',
    Component: Input,
  },{
    title: 'NumberList',
    Component: NumberList,
  },{
    title: 'Fb',
    Component: Fb,
  },
  {
    title: 'felcUser',
    Component: FelcUser,
    groupTitle:'day2'
  },{
    title: 'felcUserBtn',
    Component: FelcUserBtn,
  },{
    title: 'Form',
    Component: windowWidthHoc(Form),
  },{
    title: 'FormHoc',
    Component: FormHoc,
  },
  {
    title: 'calc',
    Component: Calc,
  },
  {
    title: 'function',
    Component: Function,
    groupTitle:'day3'
  },
  {
    title: 'hooks02',
    Component: Hooks02,
  },
  {
    title: 'context',
    Component: Context,
  },
  {
    title: 'Practice',
    Component: Practice,
  },
  {
    title: 'TimerHook',
    Component: TimerHook,
  },
  {
    title: 'Reducer',
    Component: Reducer,
  },
  {
    title: 'Callback',
    Component: Callback,
  },
  {
    title: 'HookForm',
    Component: HookForm,
    groupTitle:'day4'
  },{
    title: 'GetUser',
    Component: GetUser,
  },
  ,{
    title: 'Ordering',
    Component: Ordering,
  },
  {
    title: 'butten',
    Component: Butten,
    groupTitle:'day5'
  },{
    title: 'Grid',
    Component: Grid,
  },{
    title: 'Tabs',
    Component: Tabs,
  },
];

class App extends React.Component {
  state ={
    menuIndex:0,
  }

  componentDidMount(){
    const menuIndex = Number(window.location.hash.substring(1));
    this.setState({menuIndex:menuIndex});
  }


  onMenuClick=menuIndex=>{
    this.setState({menuIndex});
    window.location.hash=menuIndex;
  };
render(){
  const {menuIndex} = this.state;
  const {Component} =  menuMap[menuIndex];
  return (
    
    <div className="app">
      <div className="menu">
        
        <ul>{menuMap.map((menu,index)=>{
          const isCurrent = (index === menuIndex);
          const groupTitle = menu.groupTitle
         


          return (<li className={isCurrent ?'active':''} 
                   onClick={()=>this.onMenuClick(index)} key={index}>
                     
                     {groupTitle&&<h2>{groupTitle}</h2>}
                     {menu.title}
                     </li>)
        })}
        </ul>
      </div>
      <div className="main">
        <Component/>
      </div>
    </div>
     );
}
}
export default App;
